<template>
  <div class="flex jc-sb">
    <el-card class="box-card c-l mr-10 fg1">
      <div slot="header" class="clearfix">
        <span class="f-l">设备概览</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="统计当前帐号下，绑定的网关和传感器节点的总数量。"
          placement="bottom"
        >
          <span class="iconfont icon-askoutline"></span>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>
      <div class="flex equipment aic jc-sb">
        <img class="eq-img" src="../../assets/img/gateway.png" />
        <span class="line"></span>
        <div>
          <div class="f-35">{{ LoRaWAN.total }}</div>
          <div>loRaWAN</div>
          <div>网关</div>
        </div>
        <span class="line"></span>
        <div>
          <div class="f-35">{{ LoRaPP.total }}</div>
          <div>LoRaPP</div>
          <div>网关</div>
        </div>
        <span class="line"></span>
        <div>
          <div class="f-35">{{ group }}</div>
          <div style="height: 20px"></div>
          <div>群组</div>
        </div>
        <span class="line"></span>
        <i class="iconfont icon-yalichuanganqi icon"></i>
        <div>
          <div class="f-35">{{ sensor.total }}</div>
          <div>传感器节点</div>
        </div>
      </div>
    </el-card>
    <!-- 监控 -->
    <el-card class="box-card c-r mr-10">
      <div slot="header" class="clearfix">
        <span class="f-l">监控</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="统计当前帐号下，绑定的网关和传感器节点的总数量。"
          placement="right"
        >
          <span class="iconfont icon-askoutline"></span>
        </el-tooltip>
      </div>
      <ul class="monitorList">
        <li>
          <span>网关离线</span>
          <i>{{LoRaWAN.offline + LoRaPP.offline}}</i>
        </li>
        <li>
          <span>节点离线</span>
          <i>{{sensor.offline}}</i>
        </li>
        <li class="monitorList-li">
          <span>传感器低电量</span>
          <i>{{sensor.lowBattery}}</i>
        </li>
      </ul>
      <div>

      </div>
      <div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $deviceCount } from "@/api/index.js";
export default {
  name: "PreView",
  data() {
    return {
      LoRaWAN: {
        total: 0,
        offline: 0,
      },
      LoRaPP: {
        total: 0,
        offline: 0,
      },
      group: 6,
      sensor: {
        total: 40,
        offline: 27,
        lowBattery: 0,
      },
    };
  },
  created() {
    this.getCount();
  },
  methods: {
    getCount() {
      $deviceCount().then((res) => {
        let { LoRaWAN, LoRaPP, group, sensor } = res.data.data;
        this.LoRaWAN = LoRaWAN;
        this.LoRaPP = LoRaPP;
        this.group = group;
        this.sensor = sensor;
      });
    },
  },
};
</script>

<style scoped lang="less">
/* 左侧 */
.c-l {
  width: 60%;
}
.f-l{
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}
.equipment {
  padding: 20px;
  color: #303133;
  font-weight: 600;
  font-size: 14px;
  .eq-img {
    width: 51px;
  }
  .line {
    width: 2px;
    height: 60px;
    background: #e9eef6;
  }
}
.f-35 {
  font-size: 35px;
}
.icon {
  font-size: 48px;
  transform: rotate(180deg);
  color: #999999;
}
/* 右侧 */
.c-r {
  width: 30%;
}
.monitorList{
  padding: 20px;
  li{
    display: flex;
    justify-content: space-between;
    height: 36px;
    font-size: 14px;
    color: #000;
    i{
      width: 46px;
      height: 21px;
      line-height: 21px;
      border-radius: 10px;
      background: #ddf0e0;
      color: #3f8c4b;
      text-align: center;
      font-weight: 600;
    }
  }
  .monitorList-li{
    
    i{
      background: #fbdadc;
      color: #ed464e;
    }
  }
}
</style>
